<script setup>
import Upload from "@/views/setting/center/components/upload.vue";
import {useUserStore} from "@/store/user.js";

const useStore = useUserStore();
const user = useStore.user
console.log(user);
</script>

<template>
  <div class="jia-box">
    <a-card :style="{ width: '360px' }" title="个人信息">
      <div class="info">
        <Upload></Upload>
        <div class="item">
          <div>
            <icon-export/>
            <span>登录账号</span>
          </div>
          <div>{{ user.username }}</div>
        </div>
        <div class="item">
          <div>
            <icon-thumb-up />
            <span>用户昵称</span>
          </div>
          <div>{{ user.name }}</div>
        </div>
        <div class="item">
          <div>
            <icon-phone />
            <span>用户电话</span>
          </div>
          <div>{{ user.mobile }}</div>
        </div>
        <div class="item">
          <div>
            <icon-email />
            <span>用户邮箱</span>
          </div>
          <div>{{ user.email }}</div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less">
.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .item {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
  }

}
</style>